<template>
	<view :style="[{height: height}]">
		<view class="tabs" :class="[{'fixed left-0 right-0': fixed}]" :style="[{background:bgColor}]">
			<u-tabs :list="list" lineWidth="48rpx" :lineColor="lineColor" :scrollable="scrollable" :current="_current"
				:itemStyle="{height}" :inactiveStyle="{color}" :activeStyle="{
				fontWeight: 'bold',
				fontSize: '32rpx',
				color: activeColor
			}" @click="tabClick">
				<template #right>
					<slot name="right"></slot>
				</template>
			</u-tabs>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';
	const emit = defineEmits(['update:modelValue', 'change'])
	const props = defineProps({
		modelValue: {
			type: Number,
			default: 0
		},
		list: {
			type: Array,
			default: () => []
		},
		// 是否滚动，false时均分一行
		scrollable: {
			type: Boolean,
			default: true
		},
		fixed: {
			type: Boolean,
			default: false
		},
		lineColor: {
			type: String,
			default: '#0055FE'
		},
		bgColor: {
			type: String,
			default: ''
		},
		color: {
			type: String,
			default: '#333'
		},
		activeColor: {
			type: String,
			default: '#0055FE'
		},
		height: {
			type: String,
			default: '86rpx'
		}
	})
	const h = ref(86)
	const _current = computed({
		get: () => props.modelValue,
		set: val => emit("update:modelValue", val)
	})
	const tabClick = ({
		index
	}) => {
		_current.value = index;
		emit("change", index);
	}
</script>

<style scoped>
	.fixed {
		position: fixed;
	}

	.left-0 {
		left: 0;
	}

	.right-0 {
		right: 0;
	}
</style>